<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/购物车.css">
</head>
<body>
    
    <header>
        <div class="color">
        <div id="banxin1">
            <img id="shouji" src="images/images/关于我们_03.jpg" alt="" />
            <a href="" style="color: darkgray">手机版</a>
            <a href="" style="margin-left: 15px; color: darkgray">Q币充值</a>
            <span style="margin-left: 644px; line-height: 25px; color: darkgray"
              >您还未,</span
            >
            <a href="登录页.html">登录</a>
            <a href="" style="margin-left: 5px; color: darkgray">我的订单</a>
            <a href="" style="margin-left: 5px; color: darkgray">个人中心</a>
            <a href="" style="margin-left: 5px; color: darkgray">帮助中心</a>
            <span class="xS" style="margin-left: 15px; color: darkgray">游戏导航</span>
        </div>
    </div>
        <div id="bT">
            <div id="banxin2">
                <a href=""><img src="images/images/新版LOG_03.jpg" alt="" class="ccn"></a>
                <div class="stext">
                    <input type="text" placeholder="输入道具进行搜索" class="gaodu">
                    <img src="images/images/fJ_03.jpg" alt="" style="width: 49px; height:51 px; position: relative;top: -17px;left: 496px;">
                </div>
                <a href=""><img src="images/logo.png" alt="" class="logo"></a>
            </div>
        </div>
</header>
    <nav>
        <div class="sY">
            <div class="banxin3">
                <a href="道具城.html">首页</a>
                <a href="" style="font-size: 18px; color: #fff; background-color: #bf4d00;border-radius: 4px;">商品列表</a>
                <a href="">周边商城</a>
                <a href="">活动专区</a>
                <a href="">聚豆乐园</a>
                <a href="">会员聚乐部</a>
                <a href="评论.html">个人中心</a>
                <a href="" style="color: #f74a4a;">购物车 &nbsp;<span>0</span></a>
            </div>
           <div class="banxin4">
            <div class="quanbu">
                    <a href="">全部道具</a>
                    <a href="">英雄级武器</a>
                    <a href="">投掷武器</a>
                    <a href="">功能性道具</a>
                    <a href="">道具</a>
                    <a href="">主武器</a>
                    <a href="">近战武器</a>
                    <a href="">副武器</a>
                    <a href="">礼包</a>
                    <a href="评论.html">角色</a>
            </div>
        </div>
        <div class="changtiao">
            <div class="banxin5">
                <div class="fl">您现在的位置:&nbsp;
                    <a href="道具城.html">穿越火线</a>
                    &nbsp;>全部道具
                </div>
            </div>
        </div>
        </div>
    </nav>
    <div class="news">
        <div class="banxin6">
            <div class="shouhuodizhi">收货角色信息</div>

            <div class="liandong">
                选择收货地:
            <select name="" id="">

            </select>
            <select name="" id="">
        
            </select>
        </div>
        <div class="biaoge">
            <h2 >商品信息</h2>
            <table>
                <thead>
                    <tr>
                        <td>
                            <input type="checkbox">全选
                        </td>
                        <td>商品名称</td>
                        <td>类型</td>
                        <td>单价</td>
                        <td>期限</td> 
                        <td>数量</td>
                        <td>优惠</td>
                        <td>小计</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody>

                </tbody>
                <!-- <tr>
                    <td><input type="checkbox"></td>
                    <td><img src="images/强化稳定剂.jpg" alt="" class="prductimage">强化稳定剂(5个)</td>
                    <td>功能性道具</td>
                    <td id="danjia">15.00Q币</td>
                    <td>永久</td>
                    <td><input type="button" value="-" id="jianhao"><span class="shuliang">1</span><input type="button" value="+" id="jiahao"></td>
                    <td>无优惠</td>
                    <td id="xiaoji">15.00Q币</td>
                    <td><input type="button" value="删除" id="shanchu"></td>
                </tr> -->
            </table>
        </div>
        <!-- <div class="zongjia">
            <div class="shangpinjianshu">商品件数/最大件数</div>
            <p class="suanfa">共<span>1</span>个商品&nbsp;总价</p>
            <span class="pricelaile">0</span>
            <span class="qiuqiubi">Q币</span>
        </div> -->
        <div class="wodeyouhuixinxi">
            <h2>您的优惠信息</h2>
            <div class="youhuijuanzongliang">
                <div class="liang">优惠券总量: <span>0</span> <a href="">如何获得优惠券>></a>
                </div>
            </div>
            <div class="xiazai">
                <span class="gaoliang">下载掌上道聚城享更多福利</span><span class="chakanxiangqing1">查看详情</span>
                <span class="shifukuan">实付款:<i id="huaqian">0</i></span><span>Q币</span>
                <input type="button" value="提交订单" class="tijiaodingdan">
            </div>
        </div>
        <div class="wenxintishi">温馨提示</div>
        <div class="buhuo">"购买成功后系统会自动发货，如发货失败24小时内会自动补发！"</div>
        </div>
    </div>
    <footer>
        
    </footer>
</body>
</html>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/city.js"></script>
<script src="js/cookie.js"></script>
<script>
    $("footer").load("footer.html");
  $("hearder").load("hearder.html");
</script>
<script>
    var select = document.querySelectorAll('select');
    var str = '';
    for (let i = 0; i < city.城市代码.length; i++) {
        str += `<option>${city.城市代码[i].省}</option>`;
    }
    select[0].innerHTML = str;


    select[0].onclick = function () {
        shiming();
    }

    shiming()
    function shiming(){
        var str1 = '';
        var shi = select[0].value;
        for (let i = 0; i < city.城市代码.length; i++) {
            if (shi == city.城市代码[i].省) {
                for (let j = 0; j < city.城市代码[i].市.length; j++) {
                    str1 += `<option>${city.城市代码[i].市[j].市名}</option>`;
                }
                select[1].innerHTML = str1;
            }
        }
    }

    // //加减按钮
    // var shuliang = document.querySelectorAll('.shuliang');
    // var jiahao = document.querySelector('#jiahao')
    // var jianhao = document.querySelector('#jianhao')
    // console.log(jiahao);
    // console.log(jianhao);
    // console.log(shuliang[0].innerText);
    // jiahao.onclick = function (){
    //     let count = parseInt(shuliang[0].innerHTML);
    //     count++;
    //     shuliang[0].innerHTML = count;
    // }
    // jianhao.onclick = function (){
        
    //     let count = parseInt(shuliang[0].innerHTML);
    //     if(count<=0){
    //         count == 0;
    //     }else{
    //         count--;
    //     }
        
    //     shuliang[0].innerHTML = count;
      
    // }

</script>
<script>
    let vipName=getCookie("username");
    $.get("getShoppingCart.php?vipName=" + vipName,function(date){
        console.log(date)
        let str=``;
        let add_num = 0;
        let add_price = 0;
        let count=0;
        for(let i=0;i<date.length;i++){
            $("tbody").find("tr").remove();
            str+=`
            <tr class="hanghang">
                    <td><input type="checkbox" class="xuanzhong"></td>
                    <td><img src="${date[i].goodsImg}" alt="" class="prductimage">${date[i].goodsName}</td>
                    <td>${date[i].goodsType}</td>
                    <td id="danjia" class="dJ">${date[i].goodsDesc}</td>
                    <td>永久</td>
                    <td><input type="button" value="-" id="jianhao" class="jianhao"><span class="shuliang">${date[i].goodsCount}</span><input type="button" value="+" id="jiahao" class="jiahao"></td>
                    <td>无优惠</td>
                    <td id="xiaoji" class="xJ">${date[i].goodsDesc*date[i].goodsCount}</td>
                    <td><input type="button" value="删除" id="shanchu" class="shanchu"></td>
                </tr>
            `
            $("tbody").append(str);
            
                add_num += date[i].goodsCount / 1;
                add_price += date[i].goodsPrice * date[i].goodsCount;
        }
        for(let i=0;i<date.length;i++){
            //减号
                $(".jianhao").eq(i).click(function(){
                    let a=$(".dJ").eq(i).html();
                    let b=$(".shuliang").eq(i).html()/1;
                    if(b<=1){
                        b=1;
                    }
                    b--;
                    $(".shuliang").eq(i).html(b);
                    $(".xJ").eq(i).html(parseInt(a*b));
                    $.post(
                        "updateGoodsCount.php",
                        {
                            "vipName": vipName,
                            "goodsId": date[i].goodsId,
                            "goodsCount": b
                        },
                        function (date) {
                            if (date.trim() == 0) {
                                alert("修改失败！")
                            }
                        }
                    );
                })

            //加号
            $(".jiahao").eq(i).click(function(){
                    let a=$(".dJ").eq(i).html();
                    let b=$(".shuliang").eq(i).html();
                    b++;
                    $(".shuliang").eq(i).html(b);
                    $(".xJ").eq(i).html(parseInt(a*b));
                    $.post(
                        "updateGoodsCount.php",
                        {
                            "vipName": vipName,
                            "goodsId": date[i].goodsId,
                            "goodsCount": b
                        },
                        function (date) {
                            if (date.trim() == 0) {
                                alert("修改失败！")
                            }
                        }
                    );
                })
               //删除
               $(".shanchu").eq(i).click(function(){
                $(".hanghang").eq(i).remove();
                //删除接口
                $.post(
                        "deleteGoods.php",
                        {
                            "vipName": vipName,
                            "goodsId": date[i].goodsId,
                        },
                        function (date) {
                            if (date.trim() == 0) {
                                alert("删除失败！")
                            }
                        }
                    );
               })

            
        }
        for(let i=0;i<date.length;i++){
            let sum=0;
            sum+=$(".xJ").eq(i).html()/1;
            $("#huaqian").html(sum);
            console.log(sum);
        }
    },"json")
</script>